import React, { memo } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar,Tabs } from 'react-vant'
import Image1 from '../../../../image/f3.png'
import Image2 from '../../../../image/f31.gif'
import Image3 from '../../../../image/f32.gif'
import Image4 from '../../../../image/f33.gif'
import Image5 from '../../../../image/f34.gif'
import style from './index.module.scss'

const Index = memo( () => {
    const navigate=useNavigate()
    const list = [
    { img: Image2, title: '皮肤难题' },
    { img: Image3, title: '名医在线' },
    { img: Image4, title: '服务流程' },
    { img: Image5, title: '用户评价' }
]
  return (
    <div>
      <NavBar
      className={style.nav}
      title="1站解决皮肤难题"
      onClickLeft={() => navigate(-1)}
    />
        <img src={Image1} alt="" width={"100%"}/>
       <div className='demo-tabs'>
      <Tabs
      className={style.tab}
      color='orange'
        sticky
        scrollspy={{ autoFocusLast: true, reachBottomThreshold: 50 }}
      >
        {list.map((item,index) => (
          <Tabs.TabPane key={index} title={item.title}>
            <img src={item.img} alt="" />
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
    </div>
  )
})

export default Index
